<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
<input id="input" type="text">

<hr>
<h1>控制摄像头</h1>
<video width="200px" height="150px"></video>
<canvas width="200px" height="150px"></canvas>
<p>
    <button id="start">打开摄像头</button>
    <button id="snap">截取图像</button>
    <button id="close">关闭摄像头</button>
</p>
<script src="./rxjsTest.js"></script>
<!--<script src="./js/cameraCtrl.js"></script>-->
<script>
    window.onload = function () {
        var canvas = document.getElementsByTagName('canvas')[0],
                context = canvas.getContext('2d'),
                video = document.getElementsByTagName("video")[0],
                snap = document.getElementById("snap"),
                close = document.getElementById("close"),
                start = document.getElementById("start"),
                MediaStreamTrack;
        start.addEventListener('click', function () {
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: true
                }).then(function (stream) {
                    console.log(stream);
                    MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
                    video.src=(window.URL).createObjectURL(stream);
                    video.play();
                }).catch(function(err){
                    console.log(err);
                });
            }else if(navigator.getMedia){
                navigator.getMedia({
                    video: true
                }).then(function (stream) {
                    console.log(stream);
                    MediaStreamTrack=stream.getTracks()[1];
                    video.src=(window.webkitURL).createObjectURL(stream);
                    video.play();
                }).catch(function(err){
                    console.log(err);
                });
            }
        });
        snap.addEventListener('click', function () {
            context.drawImage(video, 0, 0,200,150);
        });
        close.addEventListener('click', function () {
            MediaStreamTrack && MediaStreamTrack.stop();
        });
    }
</script>
</body>
</html>